<template>
	<view class="">
		<view class="tip">
			<text style="color: red;">长按触发拖拽排序!!</text>
			<text style="color: #3F82FD;">最新版本增加顶部固定区域高度和底部固定区域高度, 以响应超过一屏时候可以正确滑动</text>
		</view>

		<drag id="drag" ref="drag" @click="itemClick" :columns="size" :list-data="listData" :top="110" :bottom="isIphoneX ? 380 : 300" @change="change"></drag>

		<view :class="['empty-bottom', isIphoneX ? 'isX' : '']"></view>

		<view :class="['control-panel', isIphoneX ? 'isX' : '']">
			<view class="panel-item"><view class="panel-item__hd">请选择需要固定住的item:</view></view>
			<view>
				<view v-for="(item, index) in listData" :key="index" @tap="toggleFixed" :data-key="index" class="circle-wrap">
					<view v-if="item.fixed" class="circle cur">✓</view>
					<view v-else class="circle"></view>
					<view>{{ index }}</view>
				</view>
			</view>

			<view class="panel-item">
				<view class="panel-item__hd">columns:</view>
				<view class="panel-item__bd"><slider @changing="sizeChange" :value="size" show-value="true" :min="1" :max="8" :step="1" /></view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp()

let listData = [
	{
		title: '这个绝望的世界没有存在的价值，所剩的只有痛楚',
		description: '思念、愿望什么的都是一场空，被这种虚幻的东西绊住脚，什么都做不到',
		images: '/static/images/swipe/1.png',
		fixed: false
	},
	{
		title: '我早已闭上了双眼，我的目的，只有在黑暗中才能实现',
		description: '有太多的羁绊只会让自己迷惘，强烈的想法和珍惜的思念，只会让自己变弱',
		images: '/static/images/swipe/2.png',
		fixed: false
	},
	{
		title: '感受痛苦吧，体验痛苦吧，接受痛苦吧，了解痛苦吧。不知道痛苦的人是不会知道什么是和平',
		description: '但我已经在无限存在的痛苦之中，有了超越凡人的成长。从凡人化为神',
		images: '/static/images/swipe/3.png',
		fixed: false
	},
	{
		title: '我决定了 从今天起 我要选择一条不会让自己后悔的路 我要创造出属于自己的忍道 ',
		description: '我才不要在这种时候放弃,即使当不成中忍,我也会通过其他的途径成为火影的,这就是我的忍道',
		images: '/static/images/swipe/4.png',
		fixed: false
	},
	{
		title: '为什么你会这么弱？就是因为你对我的仇恨...还不够深...',
		description: '你没有杀的价值...愚蠢的弟弟啊...想要杀死我的话...仇恨吧！憎恨吧！然后丑陋地活下去吧！逃吧 逃吧...然后苟且偷生下去吧！',
		images: '/static/images/swipe/5.png',
		fixed: false
	},
	{
		title: '对于忍者而言怎样活着无所谓，怎样死去才是最重要的...',
		description: '所谓的忍者就是忍人所不能忍，忍受不了饿肚子，而沦落为盗贼的人，根本不能称之为忍者',
		images: '/static/images/swipe/6.png',
		fixed: false
	},
	{
		title: '在这世上，有光的地方就必定有黑暗，所谓的胜者，也就是相对败者而言',
		description: '若以一己之思念要维持和平，必会招致战争，为了守护爱，变回孕育出恨。此间因果，是无法斩断的。现实就是如此',
		images: '/static/images/swipe/7.png',
		fixed: false
	},
	{
		title: '世界上...只有没有实力的人,才整天希望别人赞赏...',
		description: '很不巧的是我只有一个人，你说的那些家伙们已经一个都没有了，已经??全部被杀死了',
		images: '/static/images/swipe/8.png',
		fixed: false
	},
	{
		title: '千代婆婆，父亲大人和母亲大人回来了吗？？？',
		description: '明明剩下的只有痛苦了，既然你这么想活命，我就方你一条生路好了。不过，你中的毒不出三日就会要了你的命',
		images: '/static/images/swipe/9.png',
		fixed: false
	},
	{
		title: '艺术就是爆炸！！~~ 嗯 ~~ 芸术は爆発します！',
		description: '我的艺术就是爆炸那一瞬，和蝎那种让人吃惊的人偶喜剧从根本上就是不同的！',
		images: '/static/images/swipe/10.png',
		fixed: false
	}
]

import Drag from '@/components/drag/index'

export default {
	components: {
		drag: Drag
	},
	data() {
		return {
			isIphoneX: app.globalData.isIphoneX,
			size: 4,
			listData: []
		}
	},
	methods: {
		change(e) {
			this.listData = e.listData
		},
		sizeChange(e) {
			this.size = e.detail.value
		},
		itemClick(e) {
			console.log(e)
		},
		toggleFixed(e) {
			let key = e.currentTarget.dataset.key

			let { listData } = this

			listData[key].fixed = !listData[key].fixed

			this.listData = listData

			this.$refs.drag.dataChange()
		}
	},
	onLoad(query) {
		// 模仿异步加载数据
		setTimeout(() => {
			this.listData = listData
			this.$refs.drag.dataChange()
		}, 1000)
	}
}
</script>

<style lang="scss">
@import '~@/common/css/variables';

page {
	padding-top: 110rpx;
}

.empty-bottom {
	padding-bottom: 300rpx;
	&.isX {
		padding-bottom: 380rpx;
	}
}

.tip {
	position: fixed;
	top: 0;
	/* #ifdef H5 */
	top: var(--window-top);
	/* #endif */
	left: 0;
	right: 0;
	padding: 20rpx;
	font-size: 24rpx;
	color: $mainBlack3;
	z-index: 999;
	background: #ffffff;
	box-sizing: border-box;
	border-bottom: 1rpx solid $lineColor;
}

.control-panel {
	border-top: 1rpx solid $lineColor;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 111;
	background: #ffffff;
	padding: 20rpx;
	box-sizing: border-box;

	&.isX {
		padding-bottom: 80rpx;
	}
}

.panel-item {
	display: flex;
	align-items: center;

	&_hd {
	}

	&__bd {
		flex: 1;
	}
}

.circle-wrap {
	display: inline-block;
	text-align: center;
	padding: 20rpx 8rpx;
	.circle {
		width: 50rpx;
		height: 50rpx;
		border: 2rpx solid $lineColor;
		border-radius: 50%;
	}
	.cur {
		color: #fff;
		line-height: 50rpx;
		background: $mainColor;
		border: 2rpx solid $mainColor;
	}
}

.plus {
	width: 100%;
	height: 100%;
	background: #efefef;
	&:before {
		position: absolute;
		content: '';
		width: 50%;
		height: 2px;
		top: 50%;
		left: 50%;
		margin-top: -1px;
		margin-left: -25%;
		background: #cbcbcb;
	}
	&:after {
		position: absolute;
		content: '';
		width: 2px;
		height: 50%;
		top: 50%;
		left: 50%;
		margin-top: -25%;
		margin-left: -1px;
		background: #cbcbcb;
	}
}
</style>
